<template>
  <el-form :model="formData" :rules="rules" ref="userForm" label-position="right" label-width="120px">
    <el-collapse value="基础信息">
      <el-collapse-item name="基础信息">
        <template slot="title">
          <span style="color: #2a6496;">基础信息</span><i class="header-icon el-icon-info" style="color: red;"></i>
        </template>
        <el-col :span="12">
          <el-form-item label="客户端ID" prop="clientId">
            <el-input v-model="formData.clientId" maxlength="32"
                      minlength="1" show-word-limit></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="客户端密码" prop="clientSecret">
            <el-input v-model="formData.clientSecret" maxlength="32" minlength="1" show-word-limit></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="范围">
            <el-select v-model="formData.scope" multiple placeholder="请选择范围">
              <el-option label="test" value="test"></el-option>
              <el-option label="all" value="all"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="授权方式">
            <el-select v-model="formData.authorizedGrantTypes" multiple placeholder="请选择范围">
              <el-option label="password" value="password"></el-option>
              <el-option label="authorization_code" value="authorization_code"></el-option>
              <el-option label="client_credentials" value="client_credentials"></el-option>
              <el-option label="refresh_token" value="refresh_token"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="资源列表">
            <el-select v-model="formData.resourceIds" multiple placeholder="请选择范围">
              <el-option label="1" value="1"></el-option>
              <el-option label="2" value="2"></el-option>
              <el-option label="3" value="3"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="跳转列表">
            <el-select v-model="formData.redirectUris" multiple placeholder="请选择范围">
              <el-option label="1" value="1"></el-option>
              <el-option label="2" value="2"></el-option>
              <el-option label="3" value="3"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="权限">
            <el-select v-model="formData.authorities" multiple placeholder="请选择范围">
              <el-option label="1" value="1"></el-option>
              <el-option label="2" value="2"></el-option>
              <el-option label="3" value="3"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="令牌有效期">
            <el-input v-model="formData.accessTokenValiditySeconds" maxlength="32" minlength="1">
              <template slot="append">秒</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="刷新令牌有效期">
            <el-input v-model="formData.refreshTokenValiditySeconds" maxlength="32" minlength="1">
              <template slot="append">秒</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="自动授权" prop="delivery">
            <el-switch v-model="formData.autoApprove"></el-switch>
          </el-form-item>
        </el-col>
      </el-collapse-item>
    </el-collapse>

    <el-form-item style="text-align: right;margin-top: 10px;">
      <el-button @click="submit(formData)" type="primary">提交</el-button>
      <el-button @click="loadData(row.id)">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import RoleList from "../role/RoleSelector";
import RoleSelector from "../role/RoleSelector";

export default {
  name: "ClientEditor",
  components: {RoleSelector, RoleList},
  props: ['row'],
  data() {
    return {
      roleSelectorVisible: false,
      formData: {},
      rules: {
        clientId: [{required: true, message: '请输入客户端ID', trigger: 'change'}],
        clientSecret: [{required: true, message: '请输入客户端安全码', trigger: 'change'}],
      }
    };
  },
  mounted() {
    this.loadData(this.row.id);
  },
  methods: {
    submit(data) {
      this.$refs.userForm.validate((valid) => {
        if (valid) {
          this.axios({
            url: "management/authorization/client/save",
            method: "POST",
            data: data
          }).then(resp => {
            if (resp.data.success == true) {
              this.$notify({type: "success", title: '提示', message: '资源数据保存成功！', offset: 0, duration: 2000});
              this.$emit("save-success", resp.data)
            } else {
              this.$notify({type: "error", title: '提示', message: '资源数据保存失败！', offset: 0, duration: 2000});
              this.$emit("save-failure", resp.data)
            }
          })
        } else {
          this.$notify({type: "error", title: '提示', message: '资源数据验证未通过！', offset: 0, duration: 2000});
          this.$emit("save-failure", resp.data)
        }
      });
    },
    loadData(id) {
      if (id) {
        this.axios({
          url: "management/authorization/client/get_by_id",
          method: "POST",
          data: this.$qs.stringify({id: id})
        }).then(resp => {
          if (resp.data.success == true) {
            this.formData = resp.data.data
          }
        })
      } else {
        this.formData = this.row;
        this.$nextTick(function () {
          this.$refs.userForm.clearValidate();
        })
      }

    },
    //移除资源角色操作
    roleRemoveHandle() {
      let me = this;
      let selections = this.$refs.roles_table.selection;
      if (selections.length > 0) {
        selections.forEach(item => {
          let idx = me.formData.roles.indexOf(item);
          me.formData.roles.splice(idx, 1)
        })
      }
    },
    //添加资源角色
    onRoleSelected(selections) {
      if (selections.length > 0) {
        if (!this.formData.roles) {
          this.formData.roles = [];
        }
        selections.forEach(item => {
          this.formData.roles.push(item)
        })
        this.roleSelectorVisible = false;
      } else {
        this.$notify({type: "error", title: '错误', message: '没选择角色，请先选择角色！', offset: 0, duration: 2000});
      }
    }
  },
  watch: {
    row: {
      handler: function (nv, ov) {
        let me = this;
        me.formData = {};
        this.$nextTick(function () {
          me.loadData(nv.id)
          me.$refs.userForm.clearValidate();
        })
      },
      deep: true
    }
  }
}
</script>

<style scoped>

</style>
